import Logo from '@/assets/img/logo.png'


//绘制文字到canvas，判断换行位置，和设置canvas高度
function canvasWrapText(options) {
  var settings = {
      canvas: document.getElementsByTagName("canvas")[0], //canvas对象，必填，不填写默认找到页面中的第一个canvas
      canvasWidth: 240, //canvas的宽度
      canvasHeight: 240,
      drawStartX: 10, //绘制字符串起始x坐标
      drawStartY: 30, //绘制字符串起始y坐标
      lineHeight: 30, //文字的行高
      font: "24px 'Microsoft Yahei'", //文字样式
      text: "请修改掉默认的配置", //需要绘制的文本
      drawWidth: 460, //文字显示的宽度
      color: "rgb(112, 214, 180)", //文字的颜色
      backgroundColor: "rgb(101, 12, 99)", //背景颜色
  };

  //将传入的配置覆盖掉默认配置
  if (!!options && typeof options === "object") {
      for (var i in options) {
          settings[i] = options[i];
      }
  }

  //获取2d的上线文开始设置相关属性
  var canvas = settings.canvas;
  canvas.height = settings.canvasHeight;
  var ctx = canvas.getContext("2d");

  //绘制背景色
  ctx.fillStyle = settings.backgroundColor;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  //绘制文字
  ctx.font = settings.font;
  ctx.fillStyle = settings.color;
  var lineWidth = 0; //当前行的绘制的宽度
  var lastTextIndex = 0; //已经绘制上canvas最后的一个字符的下标
  //由于改变canvas 的高度会导致绘制的纹理被清空，所以，不预先绘制，先放入到一个数组当中
  var arr = [];
  for (var i = 0; i < settings.text.length; i++) {
      //获取当前的截取的字符串的宽度
      lineWidth = ctx.measureText(settings.text.substr(lastTextIndex, i - lastTextIndex)).width;

      if (lineWidth > settings.drawWidth) {
          //判断最后一位是否是标点符号
          if (judgePunctuationMarks(settings.text[i - 1])) {
              arr.push(settings.text.substr(lastTextIndex, i - lastTextIndex));
              lastTextIndex = i;
          } else {
              arr.push(settings.text.substr(lastTextIndex, i - lastTextIndex - 1));
              lastTextIndex = i - 1;
          }
      }
      //将最后多余的一部分添加到数组
      if (i === settings.text.length - 1) {
          arr.push(settings.text.substr(lastTextIndex, i - lastTextIndex + 1));
      }
  }

  //根据arr的长度设置canvas的高度
  // canvas.height = arr.length*settings.lineHeight+settings.drawStartY;
  // canvas.width = settings.canvasWidth;

  ctx.font = settings.font;
  ctx.fillStyle = settings.color;
  for (var i = 0; i < arr.length; i++) {
      ctx.fillText(arr[i], settings.drawStartX, settings.drawStartY + i * settings.lineHeight);
  }
  //判断是否是需要避开的标签符号
  function judgePunctuationMarks(value) {
      var arr = [".", ",", ";", "?", "!", ":", "\"", "，", "。", "？", "！", "；", "：", "、"];
      for (var i = 0; i < arr.length; i++) {
          if (value === arr[i]) {
              return true;
          }
      }
      return false;
  }
  var myIcon = new Image();
  myIcon.src = Logo;
  myIcon.onload = function (i) {
      ctx.drawImage(myIcon, 0,0);
      var img = document.createElement("img");
      img.src = canvas.toDataURL();
      document.body.appendChild(img);
  }
}

export default {canvas: canvasWrapText} 

export var canvas = canvasWrapText